<template>
  <template v-for="字段 in 字段组过滤" :key="字段.名称">
    <el-table-column align="center" :label="插组件.成标题(字段)" :prop="字段.名称" :width="成列宽(字段)" :sortable="!禁止排序">
      <template #default="{ row: 单项 }">
        <template v-if="编辑否 && !字段.前端设置?.禁止编辑">
          <a单字段输入 :字段="字段" :单项="单项" :插组件="插组件" />
        </template>
        <!-- 非编辑状态👇 -->
        <template v-else>
          <template v-if="字段.类型 == em.字段类型.关联字段">
            <span>{{ 插组件.取字段显示值(单项, 字段.名称 + 'id') }}</span>
          </template>
          <template v-else-if="字段.类型 == em.字段类型.time">
            {{ util.fmt时间到天(单项[字段.名称]) }}
          </template>
          <template v-else-if="字段.类型 == 'bool'">
            <el-checkbox v-model="单项[字段.名称]" disabled />
          </template>
          <template v-else>
            {{ 单项[字段.名称] }}
          </template>
        </template>
      </template>
    </el-table-column>
  </template>
</template>
<script setup lang="ts">
import * as em from '@/enums';
import * as util from 'amtf/utils';
import { computed, onBeforeMount } from 'vue';
import a单字段输入 from '@/components/a单字段输入.vue';
// const props = defineProps({
//   组件: {
//     type: {} as () => 组件,
//     required: true
//   },
//   编辑否: {
//     type: Boolean,
//     default: false
//   }
// });
// onBeforeMount(() => {
//   console.log(`多字段 onBeforeMount ing👇`)
// })

// 泛型写法👇辣眼睛
const props = withDefaults(defineProps<{
  // list: list;
  插组件: 插组件;
  指定字段名组?: string[];
  编辑否?: boolean;
  前端设置?: {};
}>(),
  {
    编辑否: false
  });

function 要覆盖列暂时否(字段: 字段) {
  if (props.编辑否 || 字段.类型 == em.字段类型.关联字段) return true
  if (字段.类型 == em.字段类型.time) return true
}

const 字段组过滤 = computed(() => {
  if (props.指定字段名组) {
    return props.插组件.筛选字段(props.指定字段名组)
  }

  let res: 字段[] = props.插组件.组件.字段组.filter(字段 => {
    if (util.含其中之一(字段.名称, ['拟删除子表ids'])) {
      return false
    }
    if (字段.是外键 == true) return false
    // if (i.类型 == em.字段类型.关联字段) return false
    if (字段.关联属性?.关联类型 == em.关联类型.一对多) return false
    // console.log(`i 👉`, i)
    return true
  })

  return res
})

import use缓存 from "@/hooks/use缓存"
const 缓存 = use缓存({ ...props.插组件.a })

function 成列宽(字段: 字段) {
  // const 字段集 = props.list.缓存.取字段集()
  const 字段集 = 缓存.取字段集()
  const 字段id = props.插组件.成字段id(字段.名称)

  if (字段集[字段id]?.列宽) {
    return 字段集[字段id].列宽
  }
  if (字段.列宽) {
    return 字段.列宽
  }
  if (字段.名称.includes('序号')) {
    return 55
  }
  return 140
}


const 禁止排序 = computed(() => {
  if (props.前端设置?.禁止排序) {
    return true
  }
  return false
})


</script>
